<template>
	<view class="container">
		<!-- 1.标题  --累计咨询：{{userPostList.length}}次 -->
		<uni-nav-bar title="聊天列表" @clickLeft="goHome" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true"></uni-nav-bar>
		<!-- 内容 -->
		<view class="content">
			<scroll-view class="scrollView" scroll-y="true" @scrolltolower="handleScrolltolowerone()"
				:style="{height: setcollapseheight() - 10 + 'px'}">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="goChat(item)">
					<view class="left">
						<view class="pic">
							<image src="@/static/socialized-service/nz/kefu/kefu.png"
								mode="widthFix"></image>
							<view v-if="item.unReadCount" class="unReadCount">{{ item.unReadCount }}</view>
						</view>
						<view class="nickName">
							<view class="name">
								{{ item.expertUserName }}
							</view>
							<view class="replay" v-if="item.content && item.content.includes('<img src')">[图片]</view>
							<view class="replay" v-else-if="item.content && item.content.includes('<video')">[视频]</view>
							<view class="replay" v-else>{{item.content}}</view>
						</view>
					</view>
					<view class="right" style="font-size: 32rpx;">
						{{ item.sendTime }}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 底部tabbar -->
		<bottomTabar></bottomTabar>
	</view>

</template>

<script>
	import chartApi from '@/api/socialized-servce/specialist-consultation/chart/index.js'
	import bottomTabar from '../../components/bottom-tabaruser/index.vue'
	export default {
		components: {
			bottomTabar
		},
		data() {
			return {
				dataList: [],
				backType: '',
				disableSendMsgFlag: false
			}
		},
		mounted() {
			// 查询对话列表
			this.getChartList()
			this.disableSendMsgFlag = uni.getStorageSync('disableSendMsgFlag')
			uni.$on('WSMSG', (data) => {
				let params = JSON.parse(data.data)
				if (params.type === 12) {
					let index = this.dataList.findIndex(el => {
						return el.expertUserId == params.data.from;
					});
					if (index != -1) {
						let co = this.dataList[index].unReadCount || 0;
						this.dataList[index].unReadCount = co + 1;
						let content = ''
						if (params.data.chatOrderStatus == 0) content = '专家审核通过'
						if (params.data.chatOrderStatus == 1) content = '专家服务结束'
						if (params.data.chatOrderStatus == 3) content = '专家拒绝咨询'
						this.dataList[index].content = content;
						this.dataList.unshift(this.dataList[index]);
						this.dataList.splice(index + 1, 1);
					}
				}
				if (params.type === 2) {
					let index = this.dataList.findIndex(el => {
						return el.expertUserId == params.data.from;
					});
					if (index != -1) {
						let co = this.dataList[index].unReadCount || 0;
						this.dataList[index].unReadCount = co + 1;
						this.dataList[index].content = params.data.content;
						this.dataList.unshift(this.dataList[index]);
						this.dataList.splice(index + 1, 1);
					}
				}
			})
		},
		onLoad(e) {
			this.backType = e.backType
		},
		methods: {
			// 获取聊天列表
			async getChartList() {
				let res = await chartApi.queryChartList({
					page: 1,
					size: 100,
					condition: {
						serviceProviderNo: uni.getStorageSync('serviceProviderNo')
					}
				})
				if (res.code === 200) {
					this.dataList = res.data.content
					this.dataList.forEach(el => {
						el['sendTime'] = this.getTime(el.sendTime * 1)
					})
				}
			},
			goHome() {
				if (this.backType === '1') {
					uni.reLaunch({
						url: '/subPage1/socialized-service/specialist-consultation/user-module/expert-information/expert-information'
					})
				} else {
					uni.reLaunch({
						url: '/pages/socialized-service/selection-system/selection-system'
					})
				}
			},
			scrollView() {
				if (this.tabIndex === 0) {
					if (this.total > this.myPostList.length) {

					} else {
						console.log('触底');
						return
					}
				} else {
					if (this.total > this.myPostList.length) {
						this.page++
						this.getResolvePost()
					} else {
						console.log('触底');
						return
					}
				}
			},
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉');
				setTimeout(function() {
					uni.stopPullDownRefresh()
				}, 1000)
			},
			handleScrolltolowerone() {
				console.log('触底');
			},
			//  设置可选择设施高度
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(136)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			// 具体聊天
			goChat(item) {
				if(this.disableSendMsgFlag) {
					uni.showToast({
						title: '您已被禁言',
						icon: 'none'
					})
					return
				}
				uni.redirectTo({
					url: `/subPage1/socialized-service/specialist-consultation/user-module/online-service/chat/chat?type=user&otherId=${item.expertUserId}&chatOrderId=${item.chatOrderId}&chatOrderStatus=${item.chatOrderStatus}`
				})
			},
			// 时间戳计算
			getTime(timestamp) {
				// 时间戳转化
				let date = new Date()
				if (timestamp) date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				const h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
				const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
				const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				return Y + M + D + h + m + s;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F5F6FA;

		.content {
			padding: 0 40rpx;
			margin-top: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 110rpx;
				margin-bottom: 40rpx;

				.left {
					display: flex;
					align-items: center;

					.pic {
						margin-right: 20rpx;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						position: relative;
						
						image {
							width: 100%;
							height: 100%;
						}
						.unReadCount {
							position: absolute;
							top: -4rpx;
							right: -10rpx;
							width: 40rpx;
							height: 40rpx;
							font-size: 24rpx;
							border-radius: 50%;
							background: #f91a19;
							color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.nickName {
						display: flex;
						flex-direction: column;
						font-size: 36rpx;

						.name {
							font-weight: 700;
						}

						.replay {
							font-size: 32rpx;
							max-width: 230rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>